嗨嗨！我是Winnie溫尼～

前言

前一個章節，我們認識到了什麼是DOM元素，也了解到DOM元素與JavaScript的關係，在HTML中引入JavaScript要緊鄰</body>前方，才可以正確使用DOM元素，而今天要介紹的是選擇器，有了選擇器才可以選擇要互動的元素唷～！

querySelector

querySelector 選擇器(單一元素)

選取document中第一個符合特定選擇器條件的元素。
document.querySelector("html標籤/.css/#id");
例：

<!-- HTML -->
<h1>標題</h1>

//JavaScript
const title = document.querySelector("h1") //選取h1中所有內容
console.log(title) //<h1>標題</h1>

querySelectorAll 選擇器(多個元素)

選取所有符合選擇器條件的元素，回傳一個靜態的NodeList(類陣列)。
document.querySelectorAll("HTML標籤/.css");
例：

<!-- HTML -->
<ul>
  <li class="item">選項一</li>
  <li class="item">選項二</li>
  <li class="item">選項三</li>
</ul>

//JavaScript
const list = document.querySelectorAll(".item") //選取所有.item內容
console.log(list) //NodeList(3)0: li.item1: li.item2: li.itemlength: 3[[Prototype]]: NodeList

getElements

getElementsByTagName 選取HTML標籤

document.getElementsByTagName('HTML標籤名稱');

getElementsByClassName 選取class

document.getElementsByClassName('class名稱');

getElementById 選取id

document.getElementById('id名稱');
注意！一個id名稱只會對應到一個標籤，所以這裡的element後面沒有s。

querySelector vs getElements

querySelector獲取的是靜態集合，getElements獲取的是動態集合。
例：querySelector

<!-- HTML -->
<ul id="box">
  <li class="a">測試1</li>
  <li class="a">測試2</li>
  <li class="a">測試3</li>
</ul>
</body>

//JavaScript
const ul = document.querySelector('ul'); //選取到ul，為了之後動態的新增li
var list = ul.querySelectorAll('li'); //選取到現有ul裡面的所有li
for(var i = 0;i<2;i++){
  ul.appendChild(document.createElement('li'));//動態追加li
}
console.log(list.length); //將for迴圈條件修改後，在ul裡添加了2個元素，輸出的結果仍然是3，並非添加之後的總數5

例：getElements

<!-- HTML -->
<ul id="box">
  <li class="a">測試1</li>
  <li class="a">測試2</li>
  <li class="a">測試3</li>
</ul>
</body>

//JavaScript
const ul = document.getElementById('box'); //選取到ul，為了之後動態的新增li
const list = ul.getElementsByTagName('li'); //選取到現有ul裡面的li
for(let i =0;i<2;i++){
  ul.appendChild(document.createElement('li')); //動態追加li
}
console.log(list.length); //將for迴圈條件修改後，在ul裡添加了2個元素，所有現在有5個li

參考資料

querySelector
如何選到想要的元素：getElement
querySelector和getElementById之間的區別

新手上路，如文章有錯誤或需修正之處，懇請大家多多指教！
那麼，我們明天見囉～